import { $constantList } from "../../../../../../../../common/utils"
import lessModule from "./index.module.less"
import { useEffect, useState } from "react"

// 主页-全景监控页面-地图组件-站点标记信息窗组件
interface componentInterface {
    sourceList: Array<object>
    change_mainIdx:Function
}
const HomePage_PanoramicMonitoringPage_MapComponent_SubstationMarkerInfoWindowComponent: React.FC<componentInterface> = (props) => {
    let [tabIdx, setTabIdx] = useState<number>(0)
    const rowList = [
        {
            label: "中性点直流",
            key: "DC",
            statusKey:"dcStatus",
            unit: "A"
        },
        {
            label: "中性点交流",
            key: "AC",
            statusKey:"acStatus",
            unit: "A"
        },
        {
            label: "变压器噪声",
            key: "NI",
            statusKey:"niStatus",
            unit: "dB"
        },
        {
            label: "变压器振动",
            key: "VA",
            statusKey:"vaStatus",
            unit: "mm/s"
        },
        {
            label: "地网对地电位",
            key: "EP",
            statusKey:"epStatus",
            unit: "V"
        },
    ]

    const click_tabIdx = (idx:number) => {
        setTabIdx(idx)
        props.change_mainIdx(idx)
    }
    
    return (
        <div className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerInfoWindowComponent"]}>
            <div className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerInfoWindowComponent-tab"]}>

                {
                    props.sourceList?.map((item, idx) => (
                        <div key={`tabItem${idx}`} className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerInfoWindowComponent-tab__item"]} style={{ backgroundColor: tabIdx === idx ? "#1890FF" : "rgba(0,0,0,0)", color: tabIdx === idx ? "#ffffff" : "#1890FF" }} onClick={() => click_tabIdx(idx)}>
                            <span>{item["monitorMain"]}</span>
                            {
                                item["isGroundPoint"] && <div className={lessModule["tab-item__radius"]} style={{ backgroundColor: tabIdx === idx ? "#FFFFFF" : "#1890FF" }}></div>
                            }
                        </div>
                    ))
                }

            </div>
            <main className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerInfoWindowComponent-main"]}>
                {
                    rowList.map((item, idx) => (
                        <div key={`rowItem${idx}`} className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerInfoWindowComponent-main__row"]} style={{ borderTop: idx ? "1px solid #DCDCDC" : "none" }}>
                            <span>{item["label"]}：</span>
                            <span className={lessModule["main-row__value"]} style={{ color: $constantList["stationStatusColor"][props.sourceList[tabIdx]?.["realData"][item["statusKey"]]]}}>{props.sourceList[tabIdx]?.["realData"][item["key"]] ??"-"} {props.sourceList[tabIdx]?.["realData"][item["key"]] === null ?"" :item["unit"]}</span>
                        </div>
                    ))
                }
            </main >
        </div >
    )
}
export default HomePage_PanoramicMonitoringPage_MapComponent_SubstationMarkerInfoWindowComponent